<template>
  <view>
      <view class="lists">
        <view v-for="(item,index) in listTop" :key="index" class="list-item">
          <text>{{ item.title }}</text>
          <text>{{ item.value }}</text>
        </view>
      </view>
      <view class="lists" >
        <view v-for="(item,index) in listCenter" :key="index" class="list-item">
          <text>{{ item.title }}</text>
          <text >{{ item.value }}</text>
        </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "userInformation",
  data(){
    return{
      listTop:[
        {title:'姓名',value:'张某某'},
        {title:'性别',value:'女'},
        {title:'国籍（区域）',value:'中国大陆'},
      ],
      listCenter:[
        {title:'证件类型',value:'身份证'},
        {title:'证件号码',value:'1**************5'},
        {title:'证件有效期',value:'2040-10-01'},
      ],
    }
  }
}
</script>
<style lang="scss">
page{
  background: #F5F5FC;
}
.lists{
  padding: 0 30rpx;
  background: #fff;
  margin-bottom: 16rpx;
  .list-item{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 115rpx;
    border-bottom: 1px  solid #f1f1f1;
    font-size: 32rpx;
    color: #666;
    &:last-child{
      border-bottom: 0;
    }
    text:nth-of-type(2){
      color: #222;
    }
  }
  view:nth-of-type(3){
    border-bottom: none;
    text:nth-of-type(1){
      white-space: nowrap;
    }    text:nth-of-type(2){
           text-align: right;
         }
  }
  view:nth-of-type(4){
    border-bottom: none;

  }

}
</style>